<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>待完成</span>
                        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                    </div>
                    <draggable v-model="arr1" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass"
                               chosenClass="chosenClass" @start="onStart" @end="onEnd">
                        <transition-group>
                            <div class="item" v-for="(item,index) in arr1" :key="index" @click="showTodoDrawer(item)">
                                <el-card shadow="hover" class="box-card">
                                    <el-row>{{item.title}}</el-row>
                                    <el-row>
                                        <span class="el-icon-date" style="font-size: 10px;margin-right: 40px">{{item.endDate}}</span>
                                        <el-tag size="small" style="margin-top: 10px" :type="item.tag!='low'?(item.tag=='minor'?'warning':''):'danger'">{{item.tag}}</el-tag>
                                    </el-row>
                                </el-card>
                            </div>
                        </transition-group>
                    </draggable>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>已完成</span>
                        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                    </div>
                    <draggable v-model="arr2" group="site" animation="300" dragClass="dragClass" ghostClass="ghostClass"
                               chosenClass="chosenClass" @start="onStart" @end="onEnd">
                        <transition-group>
                            <div class="item" v-for="(item,index) in arr2" :key="index" @click="showTodoDrawer(item)">
                                <el-card shadow="hover" class="box-card" style="color: #dddddd">
                                    <el-row>{{item.title}}</el-row>
                                    <el-row>
                                        <span class="el-icon-date" style="font-size: 10px;margin-right: 40px">{{item.endDate}}</span>
                                        <el-tag size="small" style="margin-top: 10px" color="#ffffff">{{item.tag}}</el-tag>
                                    </el-row>
                                </el-card>
                            </div>
                        </transition-group>
                    </draggable>
                </el-card>
            </el-col>
            <el-col :span="8">
            </el-col>
        </el-row>
        <!--使用draggable组件-->

        <el-drawer
                title="当前待办事项"
                :visible.sync="todoDrawer"
                size="40%">
            <div>
                <el-form ref="form" :model="form" label-width="70px">
                    <el-form-item label="标题">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="执行人">
                        <el-select v-model="form.toUsername" placeholder="请选择执行人" clearable>
                            <el-option label="自己" value="me"></el-option>
                            <el-option label="其他" value="other"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间区限">
                        <el-row :gutter="20">
                            <el-col :span="10">
                                <el-date-picker type="datetime" placeholder="开始时间" v-model="form.startDate" style="width: 100%;"></el-date-picker>
                            </el-col>
                            <el-col :span="10">
                                <el-date-picker type="datetime" placeholder="结束时间" v-model="form.endDate" style="width: 100%;"></el-date-picker>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-radio-group v-model="form.tag">
                            <el-radio label="important"></el-radio>
                            <el-radio label="minor"></el-radio>
                            <el-radio label="low"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="简述">
                        <el-input type="textarea" v-model="form.desc"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即创建</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
    </div>
</template>
<style scoped>
    /*定义要拖拽元素的样式*/
    .ghostClass {
        background-color: blue !important;
    }

    .chosenClass {
        background-color: red !important;
        opacity: 1 !important;
    }

    .dragClass {
        background-color: blueviolet !important;
        opacity: 1 !important;
        box-shadow: none !important;
        outline: none !important;
        background-image: none !important;
    }

    .item {
        margin: 5px 10px 5px 10px;
        border: solid 0 #eee;
        background-color: #f1f1f1;
    }

    .item:hover {
        background-color: #fdfdfd;
        cursor: move;
    }

    .item + .item {
        border-top: none;
        margin-top: 6px;
    }
</style>
<script>
    //导入draggable组件
    import draggable from 'vuedraggable'

    export default {
        //注册draggable组件
        components: {
            draggable,
        },
        data() {
            return {
                form: { // 详情表单
                    id:'',
                    title: '',
                    toUsername:'',
                    creatUsername:'',
                    startDate: '',
                    endDate: '',
                    type: '',
                    desc: '',
                    status: '',
                },
                todoDrawer: false, // 抽屉展示
                drag: false,
                //定义要被拖拽对象的数组
                arr1: [
                    {id: 1, title: '做一套英语试卷',toUsername:'me',creatUsername:'',startDate: '2022-02-12 13:34:00',endDate:'2022-02-12 13:34:00', status: 'low', desc: '测试一下',tag: 'low'},
                    {id: 2, title: '做一套数学试卷',toUsername:'me',creatUsername:'',startDate: '2022-02-12 13:34:00',endDate:'2022-02-12 13:34:00', status: 'low', desc: '测试一下',tag: 'minor'},
                    {id: 3, title: '做一套地理试卷',toUsername:'me',creatUsername:'',startDate: '2022-02-12 13:34:00',endDate:'2022-02-12 13:34:00', status: 'low', desc: '测试一下',tag: 'low'},
                    {id: 3, title: '做一套物理试卷',toUsername:'me',creatUsername:'',startDate: '2022-02-12 13:34:00',endDate:'2022-02-12 13:34:00', status: 'low', desc: '测试一下',tag: 'minor'}
                ],
                arr2: [
                    {id: 4, title: '做一套化学试卷',toUsername:'me',creatUsername:'',startDate: '2022-02-12 13:34:00',endDate:'2022-02-12 13:34:00', status: 'low', desc: '测试一下',tag: 'minor'},
                    {id: 5, title: '做一套政治试卷',toUsername:'me',creatUsername:'',startDate: '2022-02-12 13:34:00',endDate:'2022-02-12 13:34:00', status: 'low', desc: '测试一下',tag: 'important'},
                    {id: 6, title: '做一套历史试卷',toUsername:'me',creatUsername:'',startDate: '2022-02-12 13:34:00',endDate:'2022-02-12 13:34:00', status: 'low', desc: '测试一下',tag: 'low'},
                    {id: 7, title: '做一套语文试卷',toUsername:'me',creatUsername:'',startDate: '2022-02-12 13:34:00',endDate:'2022-02-12 13:34:00', status: 'low', desc: '测试一下',tag: 'important'}
                ]
            };
        },
        methods: {
            //开始拖拽事件
            onStart() {
                this.drag = true;
            },
            //拖拽结束事件
            onEnd() {
                this.drag = false;
            },
            showTodoDrawer(item){
                this.todoDrawer = true;
                this.form = item;
            },
            onSubmit() {// 提交表单
                console.log(this.form);
            }
        },
    };
</script>